<template>
	<view class="cart">
		<view class="main">
			<checkbox-group @change="checkboxChange">
				<view class="items" v-for="(item, index) in carList" :key="index">
					<view class="items-main">
						<view class="checkbox">
							<!-- checkbox -->
							<checkbox :value="item.cartId" :checked="item.checked" />
						</view>
						<view class="imgs">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="cart-main">
							<view class="title">{{item.title}}</view>
							<view class="center">编号{{item.sku_code}} 价格¥ {{item.price | priceFilter}}</view>
							<view class="items-count">数量{{item.count}}</view>
						</view>
					</view>
					<view class="items-bottom">
						<view class="rights">
							<view class="decrements"  @tap="decrementClick(item)">-</view>
							<view class="count">{{item.count}}</view>
							<view class="increments" @tap="incrementClick(item)">+</view>
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>
	<!-- 	<view>我是购物车2</view> -->
		<view class="tabbar">
			<view class="mains">
				<view class="main-check">
					<checkbox-group @change="mainChange">
						<checkbox value="kk" :checked="isMainChecked" /> 全选
					</checkbox-group>
				</view>
				<view class="tabbar-right">
					<view class="price">合计: ¥{{totalPrice | prices}}</view>
					<view class="pay" @tap="payClick">结算</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carList: [],
				count: 1,
				isMainChecked: false
			};
		},
		onLoad() {
			const cartList = uni.getStorageSync('lejuCar')
			let cartId = new Date;
			console.log(cartId.getTime()) // getTime() 获得时间戳
			cartList.forEach((item, index) => {
				item.checked = false;
				item.cartId = cartId.getTime().toString() + index
			})
			this.carList = cartList
			console.log(this.carList)
		},
		computed: {
			totalPrice() {
				return this.carList.reduce((preVal, val) => {
					if (val.checked) {
						return preVal += val.count * (val.price / 100)
					}else {
						return preVal
					}
				}, 0)
			}
		},
		filters: {
			priceFilter(val) {
				return (val / 100).toFixed(2)
			},
			prices(val) {
				return val.toFixed(2)
			}
			
		},
		methods: {
			payClick() {
				const arr = [];
				this.carList.forEach(item => {
					if(item.checked) {
						arr.push(item)
					}
				})
				this.$store.commit('addCarList', arr);
				// 跳转到待支付页面
				if (arr.length == 0) {
					uni.showToast({
						title: '你还没有选中商品喔',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '/pages/product/productOrder/productOrder'
					})
				}
				
				
			},
			incrementClick(item) {
				let index = this.carList.findIndex(items => items.cartId == item.cartId) 
				console.log(index)
				this.carList[index].count++
			},
			decrementClick(item) {
				let index = this.carList.findIndex(items => items.cartId == item.cartId) 
				console.log(index)
				if (this.carList[index].count <=1) {
					return 
				}else {				
				this.carList[index].count--
				}
			},
			checkboxChange(e) {
				console.log(e, '小按钮')
				console.log(e.detail.value)
				this.carList.forEach(item => {
					if (e.detail.value.includes(item.cartId)) {
						item.checked = true
						console.log(item.checked, 'true')
					} else {
						item.checked = false
						console.log(item.checked, 'false')
					}
				})
				if (e.detail.value.length == this.carList.length) {
					this.isMainChecked = true
					console.log(1)
				} else {
					this.isMainChecked = false
					console.log(2)
				}
			},
			mainChange(e) {
				console.log(e, '总按钮')
				this.isMainChecked = !this.isMainChecked
				if (this.isMainChecked) {
					// console.log()
					this.carList.forEach(item => {
						item.checked = true
					})
				} else {
					this.carList.forEach(item => {
						item.checked = false
					})
				}

				// 没有改变 购物车实例里面的checked 属性 故会出问题
				// if (e.detail.value.length !== 0) {
				// 	this.carList.forEach(item => {
				// 		item.checked = true
				// 	})
				// } else {
				// 	this.carList.forEach(item => {
				// 		item.checked = false
				// 	})
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cart {
		height: 100vh;
		// height: 100%;
		background-color: #F1ECE7;
		overflow: auto; // 解决屏幕不能全屏问题
		.tabbar {
			position: fixed;
			background-color: #fff;
			left: 0;
			bottom: 0;
			z-index: 3;
			height: 98rpx;
			width: 100%;
			display: flex;
			align-items: center;

			.mains {
				width: 100%;
				padding: 0 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.main-check {
					margin-left: 20rpx;
					display: flex;
					align-items: center;
				}

				.tabbar-right {
					display: flex;
					font-size: 28rpx;
					align-items: center;

					.pay {
						font-size: 26rpx;
						color: #fff;
						padding: 10rpx 20rpx;
						background-color: #354E44;
						margin: 0 20rpx;
						border-radius: 8rpx;
					}
				}
			}
		}

		.main {
			padding: 0 40rpx 100rpx;
			overflow: hidden;

			.items {
				background-color: #fff;
				margin: 48rpx 0;

				.items-main {
					display: flex;
					align-items: center;

					.checkbox {
						margin: 0 20rpx;
					}

					.imgs {
						width: 136rpx;
						height: 136rpx;
						margin-right: 30rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.cart-main {
						font-size: 26rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						color: #8D8D8D;

						.title {
							color: #333;
						}
					}
				}

				.items-bottom {
					display: flex;
					justify-content: flex-end;
					margin-right: 30rpx;

					.rights {
						display: flex;
						padding-bottom: 20rpx;

						.decrements,
						.increments {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #F1ECE7;
						}

						.count {
							width: 90rpx;
							height: 60rpx;
							border-radius: 10rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin: 0 10rpx;
							background-color: #F1ECE7;
						}
					}
				}
			}
		}
	}
</style>
